<template>
	<view>
		<view class="face-container">
			<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera">
				<cover-image src="../../static/face/bg.png" class="bg"></cover-image>
			</camera>
			<view class="image-container" v-if="showImage">
				<image mode="widthFix" class="photo" :src="photoPath"></image>
				<view class="cover"></view>
			</view>
		</view>
		<view class="desc">
			<block v-if="mode == 'verificate'">
				<image src="../../static/face/tips.png" mode="widthFix" class="tips"></image>
				<text>请把面部放在圆圈内</text>
				<text>拍摄脸部来确认身份</text>
			</block>
			<block v-if="mode == 'create'">
				<image src="../../static/face/face.png" mode="widthFix" class="face"></image>
				<text>请把完整面部放在圆圈内</text>
				<text>拍摄脸部来保存身份识别数据</text>
			</block>
		</view>
		<button class="btn" @tap="confirmHandle">{{ mode == 'create' ? '录入面部信息' : '身份核实' }}</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'create',
				showCamera: true,
				showImage: false,
				audio: '',
			};
		},
		methods: {

			async takePhoto() {
				return new Promise((resolve, reject) => {
					let ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality: 'high',
						success: resolve,
						fail: reject
					});
				});
			},

			async reTakePhoto() {
				new Promise(resolve => {
					setTimeout(() => {
						this.showCamera = true;
						this.showImage = false;
						resolve();
					}, 1000);
				});
			},
			async readImageFile(filePath) {
				return new Promise((resolve, reject) => {
					uni.getFileSystemManager().readFile({
						filePath: filePath,
						encoding: 'base64',
						success: resolve,
						fail: reject
					});

				});
			},

			async confirmHandle() {
				try {
					//停止播放声音
					this.audio.stop();
					//1. 拍照
					const result = await this.takePhoto();
					console.log("拍照结果", result)
					//2 读文件 编码base64
					const resp = await this.readImageFile(result.tempImagePath);
					console.log("读取图片结果", result)
					let base64Pic = 'data:image/jpeg;base64,' + resp.data;
					// 3 发送请求
					const res = await this.requestAsync(this.urls.createDriverFace, 'POST', {
						photo: base64Pic
					});

					console.log("上传人脸模型", res);
					//4 提示上传成功 返回登录首页
					this.gotoLogin();
				} catch (e) {
					//TODO handle the exception
					console.error("人脸识别未通过", e)
					uni.showToast({
						icon: 'none',
						title: '面部录入失败，请重新录入'
					});

				}
			},
			showSuccessMessage() {
				this.$refs.uToast.show({
					title: '人脸识别成功！',
					type: 'success',
					message: '人脸识别成功',
					complete: () => {
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				});
			},

			gotoLogin() {
				this.$refs.uToast.show({
					title: '人脸录入成功！',
					type: 'success',
					message: '人脸录入成功',
					complete: () => {
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
				});
			},

		},
		onLoad() {
			//加载的时候就要提示司机人脸识别
			const audio = uni.createInnerAudioContext();
			this.audio = audio;
			audio.src = "/static/voice/voice_5.mp3";
			audio.play();
		},
		onHide: function() {
			if (this.audio != null) {
				this.audio.stop()
			}
		}
	}
</script>

<style lang="less">
	@import url('face.less');
</style>